<template>
  <split-container type="left" class="h-full">
    <panel class="w-200px">
      <resource-tree @current-change="methods.treeNodeChange" v-model:data="treeData"></resource-tree>
    </panel>
    <x-card hide-search class="!border-l-0">
      <template #title>
        <el-space>
          <x-button bus-type="insert" @click="methods.add"></x-button>
          <x-button bus-type="update" @click="methods.edit"></x-button>
          <x-button bus-type="view" @click="methods.view"></x-button>
          <x-button bus-type="del" @click="methods.del"></x-button>
        </el-space>
        <el-space>
          <el-input v-model="condition.name" placeholder="名称"></el-input>
          <x-button bus-type="query" @click="methods.query"></x-button>
        </el-space>
      </template>
      <template #main>
        <x-table v-model:selection="table.selection" v-bind="table" @page-change="methods.tablePageChange">
        </x-table>
      </template>
    </x-card>
    <editor v-model:visable="editor.visable" v-bind="editor" :tree-data="treeData" @saved="methods.query"></editor>
  </split-container>
</template>
<script setup lang="ts">
import { ResourceService } from '~/service/sys'
import { ITableColumn } from '~/components/xview/table/ITableColumn'
import { reactive, ref } from 'vue'
import { ResourceQueryCondition } from '~/types/sys/ResourceQueryCondition'
import elpUtil from '~/utils/elp'
import { EditType } from '~/types/ui/EditType'
import Editor from './editor.vue'
import ResourceTree from './ResourceTree.vue'
import { SysResource } from '~/types/sys/SysResource'
import { initTable } from '~/hooks/TableHooks'
import { ITreeNode } from '~/types/ui/tree/ITreeNode'
import { EditorHooks } from '~/hooks'

let currentTreeNode: ITreeNode = null
let treeData = ref<ITreeNode[]>([])

const methods = {
  add() {
    editor.insert({
      parentResId: currentTreeNode.id
    } as SysResource)
  },
  edit() {
    if (table.selection.length == 0) {
      elpUtil.msg.warning('请先选择需要编辑的数据行')
      return
    }
    editor.update(table.selection[0])
  },
  view() {
    if (table.selection.length == 0) {
      elpUtil.msg.warning('请先选择需要查看的数据行')
      return
    }
    editor.view(table.selection[0])
  },
  async del() {
    if (table.selection.length == 0) return
    const ids = table.selection.map((t) => t.id)
    await ResourceService.del(ids)
    elpUtil.msg.success('删除资源成功')
    methods.query()
  },
  async query() {
    const data = await ResourceService.query(condition)
    table.pageCurrent = data.currentPage
    table.recordsTotal = data.recordsTotal
    table.tableData = data.data
  },
  tablePageChange(page: number) {
    condition.paging.current = page
    methods.query()
  },
  treeNodeChange(node: ITreeNode) {
    currentTreeNode = node
    condition.parentResourceId = node.id
    methods.query()
  },
  dialogVisable(val: boolean) {
    editor.visable = val
  }
}

const condition = reactive<ResourceQueryCondition>(new ResourceQueryCondition())
const editor = EditorHooks.init<SysResource>()

const table = initTable<SysResource>([
  {
    label: '标题',
    prop: 'resName',
    width: 150
  },
  {
    label: 'Key',
    prop: 'resKey',
    width: 200
  },
  {
    label: '类型',
    prop: 'resType',
    width: 120,
    formatter: (row: SysResource): string => {
      return ResourceService.resTypeText(row.resType)
    }
  },
  {
    label: '路径',
    prop: 'resPath',
    width: 200
  },
  {
    label: '图标',
    prop: 'icon',
    width: 200
  }, {
    label: '排序',
    prop: 'sort',
    width: 80
  }
] as ITableColumn[])
</script>
